<template>
	<div>
		<div id="flip-list-demo" class="demo">
			<button @click="shuffle">Shuffle</button>
			<transition-group name="flip-list" tag="ul">
				<li v-for="item in items" v-bind:key="item">
					{{ item }}
				</li>
			</transition-group>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
		}
	},
	methods: {
		shuffle () {
			const i = Math.floor(Math.random() * this.items.length)
			const item = this.items[i]
			this.items.splice(i, 1)
			this.items.push(item)
		}
	}
}

</script>
<style lang='less' scoped>
.flip-list-move {
  transition: transform 1s;
}
</style>
